<template>
  <div id="home-page">
    <!-- bg -->
    <section class="bg-home bg-cover bg-center min-h-80 sm:min-h-screen">
      <div class="text-white w-full text-center">
        <div class="mx-auto">
          <div
            class="flex justify-center items-center mb-12 pt-14 sm:mb-24 sm:pt-16"
            data-aos="fade-right"
          >
            <img src="../assets/image/logo-big.png" alt="..." width="130" />
          </div>
          <h1 class="text-white mb-12 text-6xl" data-aos="fade-left">
            财神到我家大门口!
          </h1>
          <p class="text-3xl w-7/12 m-auto pb-4" data-aos="fade-left">
            新春佳节，愿你幸福安康，事业蒸蒸日上，阖家欢乐！
          </p>
        </div>
      </div>
    </section>
    <!-- about -->
    <section class="p-10 overflow-hidden">
      <div class="title mb-4 text-center">
        <div
          class="home-title text-black"
          style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc"
          data-aos="fade-up"
        >
          About me
        </div>
      </div>
      <div class="content flex flex-col md:flex-row justify-center">
        <div
          class="content-left w-full md:w-6/12 mb-6 md:mb-0 md:mr-6"
          data-aos="fade-up-right"
        >
          <p class="mb-2">
            An sincerity so extremity he additions. Her yet there truth merit.
            Mrs all projecting favourable now unpleasing. Son law garden chatty
            temper. Oh children provided to mr elegance marriage strongly. Off
            can admiration prosperous now devonshire diminution law.
          </p>
          <p class="mb-2">
            Received overcame oh sensible so at an. Formed do change merely to
            county it. Am separate contempt domestic to to oh. On relation my so
            addition branched. Put hearing cottage she norland letters equally
            prepare too. Replied exposed savings he no viewing as up. Soon body
            add him hill. No father living really people estate if. Mistake do
            produce beloved demesne if am pursuit.
          </p>
          <p class="mb-2">
            An sincerity so extremity he additions. Her yet there truth merit.
            Mrs all projecting favourable now unpleasing. Son law garden chatty
            temper. Oh children provided to mr elegance marriage strongly. Off
            can admiration prosperous now devonshire diminution law.
          </p>
        </div>
        <div class="content-right w-full md:w-6/12" data-aos="fade-up-left">
          <div class="item-progress mb-4">
            <div class="label text-xl">PHP</div>
            <a-progress :percent="80" status="active" :show-info="false" />
          </div>
          <div class="item-progress mb-4">
            <div class="label text-xl">Javascript</div>
            <a-progress :percent="50" status="active" :show-info="false" />
          </div>
          <div class="item-progress mb-4">
            <div class="label text-xl">HTML Coding</div>
            <a-progress :percent="70" status="active" :show-info="false" />
          </div>
          <div class="item-progress mb-4">
            <div class="label text-xl">SEO</div>
            <a-progress :percent="100" :show-info="false" />
          </div>
        </div>
      </div>
    </section>
    <!-- services -->
    <section class="p-10 bg-gray-600">
      <div class="title mb-4 text-center">
        <div
          class="home-title text-white"
          style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc"
          data-aos="fade-up"
        >
          SERVICES
        </div>
      </div>
      <div class="content" data-aos="zoom-out-up">
        <div
          class="row-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
        >
          <div class="col-lg-4 flex flex-col items-center m-2">
            <a-icon type="sketch" style="font-size: 60px; color: #fff" />
            <h3 class="mb-3 text-white text-xl mt-2">Consulting</h3>
            <p class="text-white text-xs">
              On on produce colonel pointed. Just four sold need over how any.
              In to september suspicion determine he prevailed admitting. On
              adapted an as affixed limited on. Giving cousin warmly things no
              spring mr be abroad. Relation breeding be as repeated strictly
              followed margaret. One gravity son brought shyness waiting regular
              led ham.
            </p>
          </div>
          <div class="col-lg-4 flex flex-col items-center m-2">
            <a-icon type="html5" style="font-size: 60px; color: #fff" />
            <h3 class="mb-3 text-white text-xl mt-2">HTML Coding</h3>
            <p class="text-white text-xs">
              On on produce colonel pointed. Just four sold need over how any.
              In to september suspicion determine he prevailed admitting. On
              adapted an as affixed limited on. Giving cousin warmly things no
              spring mr be abroad. Relation breeding be as repeated strictly
              followed margaret. One gravity son brought shyness waiting regular
              led ham.
            </p>
          </div>
          <div class="col-lg-4 flex flex-col items-center m-2">
            <a-icon type="reddit" style="font-size: 60px; color: #fff" />
            <h3 class="mb-3 text-white text-xl mt-2">PHP webdelopment</h3>
            <p class="text-white text-xs">
              On on produce colonel pointed. Just four sold need over how any.
              In to september suspicion determine he prevailed admitting. On
              adapted an as affixed limited on. Giving cousin warmly things no
              spring mr be abroad. Relation breeding be as repeated strictly
              followed margaret. One gravity son brought shyness waiting regular
              led ham.
            </p>
          </div>
        </div>
        <hr class="mt-12" />
        <div class="text-white text-center mt-4" data-aos="zoom-in">
          <p class="lead text-2xl">
            Would you like to know more or just discuss something?
          </p>
          <a-button class="mt-4">Contact me</a-button>
        </div>
      </div>
    </section>
    <!-- My customers -->
    <section class="p-10">
      <div class="title mb-4 text-center sm:w-1/2 mx-auto">
        <div
          class="home-title"
          style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc"
          data-aos="fade-up"
        >
          My customers said about me
        </div>
        <p
          class="mt-5 text-xl text-gray-400"
          data-aos="fade-up"
          data-aos-delay="300"
        >
          I am always glad to hear that my customers leave satisfied. Some of
          them shared with you their insights on our cooperation.
        </p>
      </div>
      <div
        class="content"
        data-aos="fade-right"
        data-aos-offset="300"
        data-aos-easing="ease-in-sine"
      >
        <a-carousel effect="fade">
          <a-row>
            <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
              <img
                class="w-full object-cover"
                src="../assets/image/portfolio-1.jpg"
                alt=""
              />
            </a-col>
            <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
              <img
                class="w-full object-cover"
                src="../assets/image/portfolio-4.jpg"
                alt=""
              />
            </a-col>
            <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
              <img
                class="w-full object-cover"
                src="../assets/image/portfolio-5.jpg"
                alt=""
              />
            </a-col>
          </a-row>

          <a-row>
            <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
              <img
                class="w-full object-cover"
                src="../assets/image/portfolio-4.jpg"
                alt=""
              />
            </a-col>
            <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
              <img
                class="w-full object-cover"
                src="../assets/image/portfolio-1.jpg"
                alt=""
              />
            </a-col>
            <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
              <img
                class="w-full object-cover"
                src="../assets/image/portfolio-5.jpg"
                alt=""
              />
            </a-col>
          </a-row>
        </a-carousel>
      </div>
    </section>
    <!-- statistics -->
    <section class="statistics-bg bg-cover bg-center sm:h-80">
      <div
        class="container h-full mx-auto text-center flex flex-row justify-center items-center"
      >
        <div
          ref="animations"
          :class="show_animation ? 'animate-up' : 'show-animations'"
        >
          <div
            class="list grid items-center justify-center grid-cols-1 gap-10 text-white mt-4 uppercase sm:grid-cols-4 sm:flex-row sm:flex-wrap"
          >
            <div class="items">
              <div class="mb-2">
                <a-icon type="medium" style="font-size: 40px" />
              </div>
              <div class="text-2xl sm:text-3xl md:text-4xl mb-1">120</div>
              <p class="text-base sm:text-lg md:text-xl">Websites</p>
            </div>
            <div class="items">
              <div class="mb-2">
                <a-icon type="codepen-circle" style="font-size: 40px" />
              </div>
              <div class="text-2xl sm:text-3xl md:text-4xl mb-1">120</div>
              <p class="text-base sm:text-lg md:text-xl">Satisfied Clients</p>
            </div>
            <div class="items">
              <div class="mb-2">
                <a-icon type="ant-design" style="font-size: 40px" />
              </div>
              <div class="text-2xl sm:text-3xl md:text-4xl mb-1">120</div>
              <p class="text-base sm:text-lg md:text-xl">projects</p>
            </div>
            <div class="items">
              <div class="mb-2">
                <a-icon type="chrome" style="font-size: 40px" />
              </div>
              <div class="text-2xl sm:text-3xl md:text-4xl mb-1">120</div>
              <p class="text-base sm:text-lg md:text-xl">Magazines</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="h-1 bg-gray-200"></div>
    <!-- back top -->
    <BackTop />
  </div>
</template>

<script>
export default {
  name: 'Home',

  validate({ params, query }) {
    // 判断路由传参对不对，若是不符合规范，则可让页面跳转到404页面，不至于页面出现空白情况
    console.log('validate')
    return true
  },
  asyncData() {
    console.log('asyncData页面请求数据>>>→➡️➡️➡️')
  },

  data() {
    return {
      show_animation: true,
    }
  },

  fetch() {
    console.log('fetch获取数据>>>→➡️➡️➡️')
  },

  created() {},

  mounted() {
    window.addEventListener('scroll', this.handerScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handerScroll)
  },

  conputed: {},

  methods: {
    handerScroll(e) {
      const rect = this.$refs.animations.getBoundingClientRect().top
      if (document.documentElement.scrollTop > rect * 2 + 200) {
        this.show_animation = true
      } else {
        this.show_animation = false
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.bg-home {
  background-image: url('../assets/image/home.png');
}
.statistics-bg {
  background-image: url('../assets/image/parallax.jpg');
}
::v-deep .ant-carousel .slick-slide {
  text-align: center;
}

.show-animations {
  opacity: 0;
  transform: rotateY(180deg) scale(0.4);
  transition: opacity 1s ease, transform 1s ease;
  transform-style: preserve-3d;
}

.animate-up {
  opacity: 1;
  transform: rotateY(360deg) scale(1);
  transition: opacity 1s ease, transform 1s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}
</style>
